<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>示波器</title>
  <script src="./wavesurfer.min.js" type="text/javascript"></script>
</head>
<body>
  <div id="waveform" class="waveform"></div>

  <script>
    wavesurfer = WaveSurfer.create({
      container: document.querySelector('#waveform'),
      waveColor: '#A8DBA8',
      progressColor: '#3B8686',
      backend: 'MediaElement'
    });

    var src = 'http://bj-feiyuan-video.oss-cn-beijing.aliyuncs.com/music/getty/2018-01-10/3/mp3_192k/1080000/VCG43743633399.mp3';
    wavesurfer.load(src);
  </script>
</body>
</html>
